<template>
	<div class="video-detail">
    <div class="video" v-if="coverImg" ref="videoTip">
      <img class="cover-img" :src="videoDetail.video_cover_url" alt="">
    </div>
    <div class="video" v-show="!coverImg">
      <video 
          :style="{height:videoHeight}"
          id="wx-course-video"
          ref="videoPlay"
          class="course-video-con"
          @play="videoPlay"
          @pause="videoPause"
          @loadedmetadata="videoLoadedmetadata"
          @timeupdate="videoTimeupdate"
          playsinline="isiPhoneShowPlaysinline"
          x5-video-player-type="h5-page"
          t7-video-player-type="inline"
          webkit-playsinline="isiPhoneShowPlaysinline"
          x-webkit-airplay=""
          :kbone-attribute-map="{controls: false}"
          :show-casting-button="showButton"
          data-role="txp_video_tag"
          :src="videoDetail.video_url"></video>
    </div>

    <div class="video-controls">
      <div class="video-controls-close">
      </div>
      <div class="video-controls-pause video-play" @click="handleVideoPlay" v-if="showPause">
        <img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_play.png" alt="">
      </div>
      <div class="video-controls-wrapper" ref="videoControls" @click="handleVideoPlay">
        <div class="video-controls-wrapper-bottom" v-if="this.videoDetail.items && this.videoDetail.items.length>0">
          <div class="goods-wrapper" :class="showGoodsDialog ? 'active': ''">
            <div class="goods-wrapper-item">
              <div class="instr">
                <!-- 定制 野火教育 不显示文案 -->
                <span v-if="!wild_fire_education">视频中的同款商品</span>
                <div class="close fr" @click="handleCloseGoods">
                  <img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/icon_close.png" alt="">
                  </div>
              </div>
              <div class="goods-info">
                <div class="goods-info-left">
                  <img :src="goodsInfo.pic" alt="">
                </div>
                <div class="goods-info-right" @click="handleGoToGoodsDetail(goodsInfo.link)">
                  <div class="title">{{ goodsInfo.title }}</div>
                  <div class="watch">
                    <div class="watch-avatars"></div>
                    <!--<div class="watch-text">9w人看过</div>-->
                    <div class="watch-icon">
                      <img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/community/fillRight.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 定制 野火教育 start -->
          <div class="goods-car" @click="handleShowGoods" v-if='wild_fire_education'>
            <img class="icon-car" src="https://img.wifenxiao.com/h5-wfx/images/DZ/yhjy/books.png" alt="">
            <div class="txt">相关课程<svg-icon class="icon" icon-class="icon_right" /></div>
          </div>
          <!-- 定制 野火教育 ent -->
          <div class="goods-car" v-else @click="handleShowGoods">
            <img class="icon-car" src="https://img.wifenxiao.com/h5-wfx/images/community/shopCar.png" alt="">
            <div class="txt">同款商品<i class="icon-right"></i></div>
          </div>
          <div class="member-info">
            <div class="avatar"><img :src="videoDetail.head_portrait_url" alt=""></div>
            <div class="name">{{videoDetail.nick_name}}</div>
          </div>
          <div class="title-info">{{videoDetail.title}}</div>
        </div>
      </div>
      <div class="video-controls-action">
        <div class="action-item">
          <wx-button open-type="share" class="icon-btn">
            <img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/community/share2.png" alt="">
          </wx-button>
          <div class="num">{{videoDetail.forwarding_number || 0}}</div>
        </div>
        <div class="action-item">
          <div class="icon-btn">
            <img class="icon" @click.stop="handleLike(2)" v-if="videoDetail.is_praise == 1" src="https://img.wifenxiao.com/h5-wfx/images/like.png">
            <img class="icon" @click.stop="handleLike(1)" v-else src="https://img.wifenxiao.com/h5-wfx/images/white-like.png">
          </div>
          <!--<svg-icon class="icon" icon-class="icon_forward" />-->
          <div class="num">{{videoDetail.praise_points_num || 0}}</div>
        </div>
      </div>
    </div>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
  /**
	 * @Author: yqe@360shop.cn
	 * @Date: 2019-09-29 16:48:09
	 * @Last Modified by: yqe@360shop.cn
	 * @Last Modified time: 2019-09-29 16:48:09
	 */
  import Vue from 'vue'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin'
  import { mpShare, openPage } from '@/utils/utils'
  import { getVideoDetail, shareCountAdd, communityPraise } from '@/api/community/video'

  export default Vue.extend({
    name: 'index',
    data() {
      return {
        videoHeight: '225px',
        videoStatus: 'paused',
        current_time: 0,
        showPause: true,
        showGoodsDialog: false,
        controls: false,
        coverImg: true,
        detailId: '',
        videoDetail: {},
        goodsInfo: {},
        showButton: false, // 投屏按钮
        wild_fire_education: 0 // 定制 野火教育
      }
    },
    components: {
      SmallLogin
    },
    methods: {
      // 点赞和取消点赞
      handleLike(type) {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
        this.$loadingWrap.show()
        this.detailId = this.videoDetail.video_id
        communityPraise({
          id: this.detailId,
          type: 2,
          add: type
        }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            if (type == 1) {
              this.videoDetail.is_praise = 1
              this.videoDetail.praise_points_num = Number(this.videoDetail.praise_points_num) + 1
            } else if (type == 2) {
              this.videoDetail.is_praise = 0
              this.videoDetail.praise_points_num = Number(this.videoDetail.praise_points_num) - 1
            }
          } else {
            this.$Error(res.msg)
            // msg: "你已取消过啦！"
            if (res.errorCode == 'Q00001') {
              imgsArr.forEach(item => {
                if (item.community_id === this.detailId) {
                  item.is_praise = 0
                  item.praise_points_num = Number(item.praise_points_num) - 1
                }
              })
              this.imgsArr = imgsArr
            }
            // msg: "你已点赞过啦！"
            if (res.errorCode == 'Z00001') {
              imgsArr.forEach(item => {
                if (item.community_id === this.detailId) {
                  item.is_praise = 1
                  item.praise_points_num = Number(item.praise_points_num) + 1
                }
              })
              this.imgsArr = imgsArr
            }
          }
        })
      },
      /**
       * 分享成功之后抛出的函数
       * param.type: 1点赞数，2转发量，3播放量
       */
      shareSuccess() {
        this.$refs.shareShades.showShade = false
        shareCountAdd({ id: this.detailId, type: 2 }).then(res => {
          this.videoDetail.forwarding_number = Number(this.videoDetail.forwarding_number) + 1
        })
      },
      /*  小程序播放视频 start */
      //视频元数据加载完成时触发
      videoLoadedmetadata(e){
        this.duration=e.detail.duration

        document.body.$$getBoundingClientRect().then(res => {
          // console.log(res)
          const bodyWidth=res.scrollWidth
          const {width,height}=e.detail
          this.videoHeight=height/width * bodyWidth + 'px'
        })
      },
      //播放进度变化时触发时
      videoTimeupdate(e){
        this.current_time=e.detail.currentTime
      },
      videoPlay() {
        this.videoStatus = 'play'
      },
      videoPause() {
        this.videoStatus = 'paused'
      },
      // video播放
      clickVideoPlay() {
        this.showButton = small.wxCache('isProjectionScreen') // 投屏按钮
        const videoPlay = this.$refs.videoPlay[0]
        document.querySelector('.course-video-con').$$getContext().then(context => {
          if (this.videoStatus == 'paused') {
            this.showPause = false
            this.videoStatus = 'play'
            context.play()
          } else {
            this.showPause = true
            this.videoStatus = 'paused'
            context.pause()
          }
        })
      },
      /*  小程序播放视频 end */
      /*
	     * 获取详情的接口
	     */
      getVideoDetailPost() {
        const params = { id: this.detailId }
        getVideoDetail(params).then(res => {
          if (res.status === 1) {
            this.videoDetail = Object.assign({}, res.data, true)
            if (this.videoDetail.items && this.videoDetail.items.length > 0) {
              this.goodsInfo = this.videoDetail.items[0]
            }

            const sid = small.globalData.shopId
            const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
            const option = {
              title: res.data.title,
              imgUrl: res.data.video_cover_url, // 分享图标
              shareParam: `sid=${sid}&pid=${pid}&detailId=${res.data.video_id}`,
            }
            // 定制 野火教育 start
            this.wild_fire_education = res.data.wild_fire_education
            mpShare (true, false, '/goodsOrder/pages/videoDetail/index', option)
          } else {
            // this.handleCloseDialogEvent()
            if (this.detailId) {
              this.$Error(res.msg)
            }
          }
        })
      },
      /*
	     * 跳转到商品详情
	     */
      handleGoToGoodsDetail(link) {
        // 小程序不支持跳转外链 只支持跳转pages下的页面
        openPage(link)
          
      },
      /*
	     * 去列表页
	     */
      handleCloseDialogEvent() {
        const host = window.location.host
        const href = window.location.href
        const http = href.substring(0, 5) === 'https' ? 'https://' : 'http://'
        const url = `${http}${host}/mb/community/video?sid=${this.$route.query.sid}&pid=${this.$route.query.pid}`
        window.location.href = url
      },
      /*
	     * 暂停/播放按钮
	     */
      handleVideoPlay() {
        this.coverImg = false // 关闭遮罩图片
        this.clickVideoPlay()
      },
      /*
	     * 打开商品的弹层
	     */
      handleShowGoods() {
        this.showGoodsDialog = true
        this.handleVideoPlay()
      },
      /*
	     * 关闭商品的弹层
	     */
      handleCloseGoods() {
        this.handleVideoPlay()
        this.showGoodsDialog = false
      },
      /*
	     * 监听视频时间，超过五秒的时候打开商品弹层
	     */
      timeUpdate() {
        if (!this.$refs.videoPlay) return false
        const time = this.$refs.videoPlay.currentTime
        if (parseInt(time) === 5) {
          this.showGoodsDialog = true
        }
      },
      /*
	     * 从0开始播放视频
	     */
      playVideoEvent() {
        setTimeout(() => {
          this.clickVideoPlay()
        }, 300)
        this.showPause = false
      },
      init() {
        this.getVideoDetailPost()
        this.$nextTick(() => {
          // this.handleVideoPlay()
        })
      }
    },
    created() {
        this.detailId = this.$route.query.detailId
        this.init()
    },
    mounted() {
      this.$refs.videoPlay.addEventListener('timeupdate', this.timeUpdate)
      this.$refs.videoPlay.addEventListener('ended', this.playVideoEvent)
        window.addEventListener('wxload', query => {
          // console.log(query, 'videoDetail query')
          this.detailId = this.$route.query.detailId || query.detailId
          this.init()
          small.HandleShareParams()
        })
        window.addEventListener('wxshow', () => {
          if (!small.checkLogin()) {
            this.$refs.smalllogin.openSmallLoginPop()
          }
        })
    }
  })
</script>

<style lang="scss">
  @import "../../../../styles/mixin";
  @import "../../../../styles/variables";
  @mixin vCenter {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .video-detail{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    font-size:0;
    background: rgba(0,0,0, .95);
    z-index: 11;
    .video{
      height: 100%;
      z-index: 1;
      display: flex;
      align-items: center;
      .cover-img{
        width: 100%;
        height: auto;
        position: relative;
        z-index: 11;
      }
      video{
        width: 100%;
        max-height: 100%;
      }
    }
    .video-controls{
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      border-bottom: 0;
      z-index: 11;
      color: #fff;
      &-close{
        height: 110px;
        line-height: 110px;
        .icon-close{
          width: 110px;
          height: 110px;
          line-height: 110px;
          text-align: center;
          .icon{
            width:48px;
          }
        }
      }
      &-pause{
        text-align: center;
        position: absolute;
        width: 100%;
        top: 45%;
        z-index: 111;
        .icon{
          width:80px;
        }
      }
      &-wrapper{
        height: calc(100vh - 110px);
        position: relative;
        z-index: 11;
        &-bottom{
          position: absolute;
          bottom: 0;
          width: 100%;
          padding-left: 20px;
          .goods-wrapper{
            margin-bottom: 25px;
            margin-left: -520px;
            transition: 0.5s ease all;
            &.active{
              margin-left: 0;
            }
            &-item{
              width: 490px;
              height: 250px;
              background: #fff;
              color: #b5b5b5;
              font-size: 24px;
              padding: 25px 0 26px 30px;
              border-radius: 6px;
              position: relative;
              .instr{
                margin-bottom: 16px;
                .close{
                  position: absolute;
                  width: 72px;
                  height: 72px;
                  line-height: 72px;
                  text-align: center;
                  font-size: 30px;
                  right: 0;
                  top: 0;
                  .icon{
                    width: 30px;
                  }
                }
              }
              .goods-info{
                &-left{
                  @include alignTop;
                  width: 160px;
                  height: 160px;
                  border: 2px solid rgba(222, 222, 222, .35);
                  border-radius: 8px;
                  overflow: hidden;
                  img{
                    width: 100%;
                  }
                }
                &-right{
                  @include alignTop;
                  width: 255px;
                  height: 160px;
                  margin-left: 20px;
                  position: relative;
                  .title{
                    font-size: 26px;
                    color: #0c0c0c;
                    @include lineClamp($font-size:24px,$line-height:1.5,$lines-to-show:2)
                  }
                  .watch{
                    position: absolute;
                    bottom: 10px;
                    width: 100%;
                    &-avatars, &-text{
                      @include alignTop;
                    }
                    &-icon{
                      position: absolute;
                      bottom: -10px;
                      display: inline-block;
                      font-size: 44px;
                      right: 0;
                      color: $mainColor;
                      .icon{
                        width: 44px;
                      }
                    }
                  }
                }
              }
            }
          }
          .goods-car{
            padding: 20px;
            border-radius: 70px;
            background: rgba(0, 0, 0, .34);
            /*background: #ddd;*/
            display: inline-block;
            .icon-car{
              @include alignTop;
              font-size: 30px;
              width: 30px;
              height: 30px;
              margin-right: 5px;
            }
            .txt{
              @include alignTop;
              font-size: 26px;
              height: 30px;
              .icon{
                width: 20px;
                margin-left: 4px;
              }
            }
          }
          .member-info{
            margin-top: 15px;
            font-size: 0;
            margin-bottom: 16px;
            .avatar{
              @include alignTop;
              width: 65px;
              height: 65px;
              border-radius: 50%;
              border: 4px solid #fff;
              overflow: hidden;
              img{
                width: 100%;
              }
            }
            .name{
              @include alignTop;
              margin-top: 20px;
              margin-left: 14px;
              font-size: 26px;
            }
          }
          .title-info{
            font-size: 30px;
            width: 630px;
            line-height: 46px;
            padding-bottom: 50px;
          }
        }
      }
      &-action{
        position: fixed;
        text-align: center;
        right: 0;
        z-index: 11111;
        width: 100px;
        bottom: 0;
        padding-bottom: 50px;
        .action-item{
          font-size: 0;
          .icon-btn{
            display: inline-block;
            width:60px;
            text-align: center;
            background: transparent;
          }
          .icon{
            width:60px;
            margin-bottom: 8px;
          }
          .num{
            font-size: 24px;
          }
          .icon_like {
            width: 60px;
            height: 60px;
            margin-top: 30px;
          }
        }
      }
    }
  }
</style>
